<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="../vendor/jquery-1.11.1.min.js"></script>
    <!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en" type="text/javascript"></script>-->
    <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    mapOptions);
        }

        $(function(){
            $("tr").on("click",function(){
                var table=$(this).closest("table");
                var index=table.find("tr").index($(this));
                alert(index);
            });
            $(".test").on("click","p", function () {
                $(this).after("<p>add after time out</p>");
            });
        });
    </script>
</head>
<body>
<div id="map_canvas" style="width:800px; height:600px;" class="test">
    <p>add before</p>
</div>
<div class="test">
    <p>add before</p>
</div>
<table>
    <tbody>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
    </tbody>
</table>
<table>
    <tbody>
    <tr><td>21</td></tr>
    <tr><td>22</td></tr>
    </tbody>
</table>
<table>
    <tbody>
    <tr><td>31</td></tr>
    </tbody>
</table>
</body>
</html>